const path=require('path');

//启用热更新的第二步
const webpack=require('webpack');

//导入在内存中生成HTML的插件
// 注意：只要是插件都一定要放到 plugins 节点中去
const htmlWebpackPlugin=require('html-webpack-plugin');

// 这个配置文件。起始就是一个JS文件，通过 Node 中的模块操作，向外暴露了一个配置对象
module.exports={
    // 入口，表示要使用webpack打包哪个文件
    entry:  {
        path:path.resolve(__dirname,'./src/main.js')
    },
    // 出口配置
    output:{
        path:path.resolve(  './dist'),//指定打包好的文件，输出到哪个文件目录中去
        filename:'bundle.js'//这是指定输出文件的名称
    },
    devServer:{
        open:true,//自动打开浏览器
        port:2828,//设置启动时的运行端口

        // contentBase:'src',//指定托管的目录
        
        hot:true//启用热更新的第一步
    },
    plugins:[//配置插件的节点  //plugins：插件
        new webpack.HotModuleReplacementPlugin(),
        //new 一个热更新的对象，这是启用热更新的第三步

        new htmlWebpackPlugin({
            template:path.resolve(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],
    module:{//这个节点用于配置所有第三方模块加载器  //module：模块
        rules:[//所有第三方模块的匹配规则   
            {test:/\.css$/,use:['style-loader','css-loader']},
            //配置处理.css文件的第三方loader规则

            //配置处理.less文件的第三方loader规则
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},

            //配置处理.scss文件的第三方loader规则
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},

            //配置处理url图片路径的第三方loader规则
            
            // {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:['url-loader?limit=1000&name=[name].[ext]']},

            /* limit的值是图片的字节大小，单位是byte，如果我们引用的图片大于等于则不会
            被转换为base64格式的字符串,反之则会转换为base64格式的字符串 */

            /* {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:['url-loader?limit=1000&name=[name].[ext]']}
            这句代码没加hash值遇到同样名字的图片就会出现前面的图片被后面的图片覆盖的情况， */
            /* 这时我们就需要 */
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:['url-loader?limit=1000&name=[hash:8]-[name].[ext]']},
            
            //配置处理字体文件
             {test:/\.(ttf|eot|svg|woff|woff2)$/,use:['url-loader']},

            //配置babel相关文件,处理js
            {test:/\.js$/,use:['babel-loader'],exclude:/node_modules/} ,

            //配置vue相关处理文件
            {test:/\.vue$/,use:['vue-loader']}
            
        ]    
    } ,
    mode:"development"

}